import { StyleSheet, Text, View, ScrollView, TouchableOpacity, Linking } from 'react-native';
import React from 'react';
import { useTranslation } from 'react-i18next';
import FastImage from '@d11/react-native-fast-image';
import LinearGradient from 'react-native-linear-gradient';
import { useRoute, useNavigation } from '@react-navigation/native';
import Icon from 'react-native-vector-icons/Ionicons';
import { FocusAwareStatusBar } from '~/components';
import { isIos, px2dp, scale, width } from '~/utils/px2dp';
import { getAge } from '~/utils/formatDate';

export default function DoctorDetailes() {
    const { t } = useTranslation();
    const router: any = useRoute();
    const { userInfo } = router.params || {};
    const navigation: any = useNavigation();
    // 拨打医生电话
    const callPhone = () => {
        Linking.openURL(`tel:${userInfo.armarium_science_user_mobile}`);
    };
    return (
        <View style={styles.container}>
            <FocusAwareStatusBar translucent />
            <LinearGradient
                style={styles.container}
                colors={['rgba(37, 200, 200, 0.59)', '#fff']}
                start={{ x: 0, y: 0 }}
                end={{ x: 0, y: 1 }}>
                <View style={[styles.nav, styles.row]}>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={() => {
                            navigation.goBack();
                        }}>
                        <Icon name="chevron-back-outline" size={px2dp(50)} color={'#fff'}></Icon>
                    </TouchableOpacity>
                    <Text style={styles.navtitle}>{t('DoctorDetailes.title')}</Text>
                    <View />
                </View>
                <ScrollView contentContainerStyle={styles.contentContainerStyle} showsVerticalScrollIndicator={false}>
                    <View style={[styles.userInfo, styles.row]}>
                        <View>
                            <View style={styles.row}>
                                <Text style={[styles.name]} numberOfLines={1}>
                                    {userInfo?.armarium_science_user_name}
                                </Text>
                                <View style={[styles.active_border]}>
                                    <Text style={[styles.active_border_text]}>{t('Acupoints.t5')}</Text>
                                </View>
                            </View>
                            <View style={[styles.row, { marginTop: px2dp(24) }]}>
                                <View style={[styles.row, { marginLeft: px2dp(12) }]}>
                                    <FastImage
                                        style={styles.birthdayIcons}
                                        source={{
                                            uri: 'https://bjy-crmeb.oss-cn-shenzhen.aliyuncs.com/attach/2025/02/cfd3d202502221525008152.png',
                                            priority: FastImage.priority.high,
                                        }}
                                        resizeMode={FastImage.resizeMode.contain}
                                    />
                                    <Text>{getAge(userInfo?.armarium_science_user_birthday)}</Text>
                                </View>
                                <TouchableOpacity onPress={callPhone} style={[styles.row, { marginLeft: px2dp(24) }]}>
                                    <FastImage
                                        style={styles.birthdayIcons}
                                        source={{
                                            uri: 'https://bjy-crmeb.oss-cn-shenzhen.aliyuncs.com/attach/2023/11/4e62d202311061625351306.png',
                                            priority: FastImage.priority.high,
                                        }}
                                        resizeMode={FastImage.resizeMode.contain}
                                    />
                                    <Text>{userInfo.armarium_science_user_mobile}</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                        <FastImage
                            style={styles.avatar}
                            source={{
                                uri:
                                    userInfo?.wx_head_portrait ||
                                    'https://bjy.oss-cn-shenzhen.aliyuncs.com/pic/20230413/3041681348866.png',
                                priority: FastImage.priority.high,
                            }}
                            resizeMode={FastImage.resizeMode.contain}
                        />
                    </View>
                    <View style={styles.content}>
                        <Text style={styles.t1}>{t('DoctorDetailes.t1')}</Text>
                        <View style={[styles.info, styles.row]}>
                            <TouchableOpacity style={styles.item} onPress={callPhone}>
                                <FastImage
                                    style={styles.icons}
                                    source={{
                                        uri: 'https://bjy-crmeb.oss-cn-shenzhen.aliyuncs.com/attach/2025/02/912bd202502281147514953.png',
                                        priority: FastImage.priority.high,
                                    }}
                                    resizeMode={FastImage.resizeMode.contain}
                                />
                                <Text style={styles.title}>{t('DoctorDetailes.t2')}</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                style={styles.item}
                                onPress={() => navigation.navigate('MessageScreen', { type: '5' })}
                                // onPress={() => navigation.navigate('VoiceMessageList', {})}
                            >
                                <FastImage
                                    style={styles.icons}
                                    source={{
                                        uri: 'https://bjy-crmeb.oss-cn-shenzhen.aliyuncs.com/attach/2025/02/e8b6c202502281409176702.png',
                                        priority: FastImage.priority.high,
                                    }}
                                    resizeMode={FastImage.resizeMode.contain}
                                />
                                <Text style={styles.title}>{t('DoctorDetailes.t3')}</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </ScrollView>
            </LinearGradient>
        </View>
    );
}

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    container: {
        flex: 1,
        backgroundColor: '#F7F7F7',
    },
    contentContainerStyle: {
        flexGrow: 1,
        paddingBottom: '20%',
        top: '16%',
    },
    nav: {
        position: 'absolute',
        top: isIos() ? '8%' : '6%',
        justifyContent: 'space-between',
        width: width - px2dp(48),
        marginHorizontal: px2dp(24),
        zIndex: 999,
    },
    navtitle: {
        color: '#fff',
        fontSize: scale(30),
        fontWeight: 'bold',
    },
    userInfo: {
        marginHorizontal: px2dp(24),
        justifyContent: 'space-between',
    },
    name: {
        color: '#1A1A1A',
        fontSize: scale(48),
        fontWeight: 'bold',
    },
    active_border: {
        backgroundColor: 'rgba(29, 206, 135, 0.12)',
        width: px2dp(100),
        height: px2dp(40),
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: px2dp(12),
        marginLeft: px2dp(12),
    },
    active_border_text: {
        color: '#1DCE87',
        fontSize: scale(24),
        fontWeight: 'bold',
    },
    birthdayIcons: {
        width: px2dp(40),
        height: px2dp(40),
        marginRight: px2dp(8),
    },
    avatar: {
        width: px2dp(128),
        height: px2dp(128),
        borderRadius: px2dp(22),
    },
    content: {
        flexGrow: 1,
        backgroundColor: '#fff',
        marginTop: px2dp(48),
        padding: px2dp(24),
    },
    t1: {
        color: '#1A1A1A',
        fontWeight: 'bold',
        fontSize: scale(32),
    },
    info: {
        marginTop: px2dp(30),
    },
    item: {
        alignItems: 'center',
        justifyContent: 'center',
        marginRight: px2dp(40),
    },
    icons: {
        width: px2dp(64),
        height: px2dp(64),
    },
    title: {
        color: '#4C4C4C',
        fontSize: scale(24),
        marginTop: px2dp(12),
        fontWeight: '400',
    },
});
